<template>
    <div>


                <el-form :model="model" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm page-form">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="工序检验单编号" prop="RecordCode">
                                <el-input v-model="model.RecordCode" placeholder="请输入工序检验单编号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="物料名称" prop="ItemName">
                                <el-input v-model="model.ItemName" placeholder="请输入物料名称"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="是否启用" prop="EnableFlag">
                                <el-radio-group v-model="model.EnableFlag">
                                    <el-radio label="Y">是</el-radio>
                                    <el-radio label="N">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="线别名称" prop="LineType">
                                <el-select v-model="model.LineType" placeholder="请选择线别名称" allow-create filterable>
                                    <el-option label="铜线" value="铜线"></el-option>
                                    <el-option label="铝线" value="铝线"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="型号名称" prop="Model">
                                <el-select v-model="model.Model" placeholder="请选择型号名称">
                                    <el-option v-for="item in ModelList" :key="item.Id" :label="item.Name"
                                        :value="item.Id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">

                            <el-form-item label="规格名称" prop="Spec">
                                <el-select v-model="model.Spec" placeholder="请选择规格名称">
                                    <el-option v-for="item in SpecList" :key="item.Id" :label="item.Name"
                                        :value="item.Id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="供应商" prop="Vendor">
                                <el-select v-model="model.Vendor" placeholder="请选择供应商">
                                    <el-option v-for="item in VendorList" :key="item.Id" :label="item.VendorName"
                                        :value="item.Id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="有效日期" prop="EffectiveDate">
                                <el-date-picker v-model="model.EffectiveDate" type="datetime"
                                    placeholder="选择日期时间"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="品类名称" prop="Kind">
                                <el-select v-model="model.Kind" placeholder="请选择品类名称" allow-create filterable></el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-divider></el-divider>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="产品物料标识" prop="ItemOrProduct">
                                <el-input  v-model="model.ItemOrProduct" placeholder="请输入产品物料标识" ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="产品单位" prop="UnitOfMeasure">
                                <el-select v-model="model.UnitOfMeasure" placeholder="请选择产品单位">
                                    <el-option v-for="item in UnitMeasureList" :key="item.Id" :label="item.MeasureName"
                                        :value="item.Id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="产品分类" prop="ItemTypeName">
                                <el-input v-model="model.ItemTypeName" placeholder="请选择产品分类" :readonly="true"
                                    @focus="selectItemType"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="备注" prop="Remark">
                                <el-input v-model="model.Remark" placeholder="请输入备注"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="采购价" prop="PurchasePrice">
                                <el-input v-model="model.PurchasePrice" placeholder="请输入采购价"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="销售价" prop="SalePrice">
                                <el-input v-model="model.SalePrice" placeholder="请输入销售价"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>



                </el-form>


        <div style="text-align:right; margin: 10px;">
            <el-button type="primary" @click="submitForm">立即创建</el-button>
            <el-button @click="resetForm">重置</el-button>
        </div>
    </div>
</template>



<script>

export default {
    props: {
        model: {
            require: true,
            type: Object,

        },
        isUpdate: {
            require: true,
            type: Boolean
        }
    },
    data() {
        return {


            rules: {
                ItemCode: { required: true, message: '请输入物料编码', trigger: 'blur' },
                ItemName: { required: true, message: '请输入物料名称', trigger: 'blur' },
            }
        }
    },
    created() {

    },
    methods: {
        //立即创建 或 保存
        submitForm() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {

                    if (this.isUpdate) {
                        this.put();
                    }
                    else {
                        this.add();
                    }

                } else {
                    this.showNotify('请输入必填项');
                    return false;
                }
            });
        },
        //重置
        resetForm() {
            this.$refs['ruleForm'].resetFields();
        },
        add() {
            this.$http.postForm('/api/Item', { model: this.model,ProductBomString:JSON.stringify(this.tableData) }, { loading: this.$loading() })
            .then(res => {
                this.$emit('callback');
            })

        },
        //修改
        put() {
            this.$http.putForm('/api/Item', { model: this.model,ProductBomString:JSON.stringify(this.tableData) }, { loading: this.$loading() })
                .then((res) => {
                    this.$emit('callback');
                })
        },



    }
}
</script>
 